<template>
	<view class="order-confirm-container">
		<!-- 导航栏 -->
		<ob-navbar
			title="确认订单"
			:show-back="true"
			:prevent-default-back="true"
			@left-click="backToCart"
		/>

		<!-- 订单类型切换 -->
		<view class="order-type-section">
			<view class="type-tabs">
				<view
					class="type-tab"
					:class="{ 'tab-active': orderType === 'personal' }"
					@click="switchOrderType('personal')"
				>
					<text class="tab-text">个人订单</text>
				</view>
				<view
					class="type-tab"
					:class="{ 'tab-active': orderType === 'ship' }"
					@click="switchOrderType('ship')"
				>
					<text class="tab-text">船舶订单</text>
				</view>
			</view>
		</view>

		<scroll-view class="main-content" scroll-y="true">
			<!-- 收货港口（统一：仅按港口提货，确认页不提供更换入口） -->
			<view class="address-section">
				<view class="section-header">
					<text class="section-title">{{ orderType === 'ship' ? '收货船舶' : '收货港口' }}</text>
				</view>

				<view class="address-card">
					<template v-if="orderType === 'personal'">
						<view v-if="selectedPort" class="address-info">
							<view class="address-name">
								<text class="name">{{ selectedPort.name }}</text>
								<text class="phone">{{ selectedPort.code }}</text>
							</view>
							<text class="address-detail">收货港口来自首页选择</text>
						</view>
						<view v-else class="no-address">
							<text class="no-address-text">请先到首页选择目的港</text>
						</view>
					</template>
					<template v-else>
						<!-- #ifdef H5 -->
						<view class="address-info" @click="openShipSelector">
							<view class="address-name">
								<text class="name">{{ selectedShip ? selectedShip.shipName : '请选择船舶' }}</text>
								<text v-if="selectedShip && selectedShip.imoCode" class="phone">IMO: {{ selectedShip.imoCode }}</text>
							</view>
							<text class="address-detail">点击选择或更换收货船舶</text>
						</view>
						<!-- #endif -->

						<!-- #ifndef H5 -->
						<picker mode="selector" :range="shipOptions" range-key="shipName" :value="shipIndex" @change="onShipChange">
							<view class="address-info">
								<view class="address-name">
									<text class="name">{{ selectedShip ? selectedShip.shipName : '请选择船舶' }}</text>
									<text v-if="selectedShip && selectedShip.imoCode" class="phone">IMO: {{ selectedShip.imoCode }}</text>
								</view>
								<text class="address-detail">点击选择或更换收货船舶</text>
							</view>
						</picker>
						<!-- #endif -->
					</template>
				</view>
			</view>


				<!-- 船长信息（仅船舶订单显示） -->
				<view v-if="orderType === 'ship'" class="captain-section">
					<view class="section-header">
						<text class="section-title">船长信息</text>
					</view>
					<view class="form-item">
						<input class="form-input" v-model="captainName" placeholder="请输入船长姓名（必填）" />
					</view>
					<view class="form-item">
						<input class="form-input" type="number" v-model="captainPhone" placeholder="请输入船长电话（必填）" />
					</view>
				</view>


				<!-- 个人订单：联系信息（默认使用用户表电话） -->
				<view v-if="orderType === 'personal'" class="captain-section">
					<view class="section-header">
						<text class="section-title">联系信息</text>
					</view>
					<view class="form-item">
						<input class="form-input" type="number" v-model="contactPhone" placeholder="请输入联系电话" />
					</view>
				</view>

			<!-- 商品列表 -->
			<view class="products-section">
				<view class="section-header">
					<text class="section-title">商品清单</text>
					<text class="product-count">共{{ totalQuantity }}件</text>
				</view>

				<view class="product-list">
					<view
						v-for="(item, index) in orderItems"
						:key="index"
						class="product-item"
					>
						<image class="product-image" :src="getProductImage(item)" mode="aspectFill" />
						<view class="product-info">
							<text class="product-name">{{ getProductName(item) }}</text>
							<text v-if="getProductSpec(item)" class="product-spec">{{ getProductSpec(item) }}</text>
							<view class="product-price-qty">
								<text class="price">¥{{ getUnitPrice(item) }}</text>
								<text class="quantity">x{{ item.quantity }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="fee-section">
				<view class="section-header">
					<text class="section-title">费用明细</text>
				</view>

				<view class="fee-list">
					<view class="fee-item">
						<text class="fee-label">商品总计</text>
						<text class="fee-value">¥{{ priceInfo.productTotal }}</text>
					</view>
					<view class="fee-item">
						<text class="fee-label">运费</text>
						<text class="fee-value">{{ priceInfo.shippingFee === 0 ? '免邮' : '¥' + priceInfo.shippingFee }}</text>
					</view>
					<view v-if="priceInfo.discount > 0" class="fee-item discount">
						<text class="fee-label">优惠减免</text>
						<text class="fee-value">-¥{{ priceInfo.discount }}</text>
					</view>
				</view>

				<view class="total-fee">
					<text class="total-label">实付金额</text>
					<text class="total-value">¥{{ priceInfo.totalAmount }}</text>
				</view>
			</view>

			<!-- 支付方式 -->
			<view class="payment-section">
				<view class="section-header">
					<text class="section-title">支付方式</text>
				</view>

				<view class="payment-list">
					<view
						v-for="(payment, index) in paymentMethods"
						:key="index"
						class="payment-item"
						:class="{ 'payment-selected': selectedPayment === payment.id }"
						@click="selectPayment(payment.id)"
					>
						<image class="payment-icon" :src="payment.icon" mode="aspectFit" />
						<text class="payment-name">{{ payment.name }}</text>
						<view class="payment-radio">
							<text v-if="selectedPayment === payment.id" class="radio-checked">●</text>
							<text v-else class="radio-unchecked">○</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 备注信息 -->
			<view class="remark-section">
				<view class="section-header">
					<text class="section-title">订单备注</text>
				</view>
				<view class="remark-box">
					<textarea
						class="remark-input"
						v-model="orderRemark"
						:maxlength="remarkMaxLength"
						placeholder="例如：请尽快发货；如需发票请备注抬头（选填）"
					/>
					<view class="remark-footer">
						<text class="remark-hint">可填写配送要求、发票抬头等</text>
						<text class="remark-count">{{ orderRemark.length }}/{{ remarkMaxLength }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部提交区域 -->
		<view class="submit-footer">
			<view class="price-summary">
				<text class="total-text">实付金额：</text>
				<text class="total-price">¥{{ priceInfo.totalAmount }}</text>
			</view>

			<!-- H5 自定义船舶选择弹层 -->
			<!-- #ifdef H5 -->
			<view v-if="showShipPopup" class="sheet-mask" @click.self="closeShipSelector">
				<view class="sheet-panel">
					<view class="sheet-header">选择收货船舶</view>
					<scroll-view class="sheet-list" scroll-y="true">
						<view v-for="(s, idx) in shipDisplayList" :key="idx" class="sheet-item" :class="{ active: idx === shipIndex }" @click="handleSelectShip(idx)">
							<view class="sheet-item-main">
								<view class="sheet-title">{{ s.title }}</view>
								<view v-if="s.sub" class="sheet-sub">{{ s.sub }}</view>
							</view>
							<text v-if="idx === shipIndex" class="sheet-check">✓</text>
						</view>
					</scroll-view>
					<view class="sheet-cancel" @click="closeShipSelector">取消</view>
				</view>
			</view>
			<!-- #endif -->

			<button
				class="submit-btn"
				:class="{ 'btn-disabled': !canSubmit }"
				:disabled="!canSubmit"
				@click="submitOrder"
			>
				<text class="submit-text">{{ isSubmitting ? '提交中...' : '提交订单' }}</text>
			</button>
		</view>

		<!-- 加载组件 -->
		<ob-loading :visible="isSubmitting" text="正在提交订单..." />
	</view>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import orderApi from '../../api/order.js'
import userApi from '../../api/user.js'
import productApi from '../../api/product.js'
import cartApi from '../../api/cart.js'
import { getCurrentUserId } from '../../utils/userAuth.js'
import request from '../../utils/request.js'

// 船长信息（前端输入框绑定）
const captainName = ref('')
const captainPhone = ref('')

const contactPhone = ref('')

// 全局状态
const store = inject('$store')

// 响应式数据
const remarkMaxLength = 200

const orderType = ref('personal') // personal | ship
const orderItems = ref([])
const selectedAddress = ref(null)
const shipInfo = ref({})
const selectedPayment = ref('')
const orderRemark = ref('')
const isSubmitting = ref(false)

// 船舶选择
const shipOptions = ref([])
const selectedShip = ref(null)
const selectedShipId = ref('')


// 费用信息
const priceInfo = ref({
	productTotal: 0,
	shippingFee: 0,
	customsFee: 0,
	discount: 0,
	totalAmount: 0
})

// 支付方式图标（内联SVG，避免静态资源缺失）
const svgToDataUri = (svg) => `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
// 更贴近“微信支付”风格的图标：绿色圆角方块 + 白色气泡 + 绿色对勾
const wechatIcon = svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect width="40" height="40" rx="8" fill="#07C160"/><path d="M26 14a8 8 0 1 1-12 6.9L12 25l1.1-3.4A8 8 0 0 1 26 14z" fill="#fff"/><path d="M17 20l3 3 6-6" stroke="#06A35A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>')
// 支付宝：蓝色圆角方块 + 中文“支”
const alipayIcon = svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect width="40" height="40" rx="8" fill="#1677FF"/><text x="20" y="26" text-anchor="middle" font-size="20" fill="#fff">支</text></svg>')

// 支付方式
const paymentMethods = ref([
	{ id: 'wechat', name: '微信支付', icon: wechatIcon },
	{ id: 'alipay', name: '支付宝', icon: alipayIcon }
])

// 从用户资料填充默认联系电话（用于船舶订单“船长电话”）
const fillPhoneFromUser = async () => {
  try {
    // 仅用于个人订单的联系手机号默认值，不影响船舶订单的船长电话
    const storePhone = store?.state?.userInfo?.phone
    if (storePhone) {
      if (!contactPhone.value) contactPhone.value = String(storePhone)
      return
    }
    const resp = await userApi.getUserProfile()
    const phone = resp?.phone || resp?.data?.phone || resp?.user?.phone
    if (phone && !contactPhone.value) {
      contactPhone.value = String(phone)
    }
  } catch (e) {
    console.warn('获取用户电话失败（忽略）：', e?.message || e)
  }
}


// 计算属性
const selectedPort = computed(() => store.state.selectedPort)
const totalQuantity = computed(() => {
	return orderItems.value.reduce((total, item) => total + item.quantity, 0)
})

const canSubmit = computed(() => {
	const baseReady = orderType.value === 'ship' ? !!selectedShip.value : !!selectedPort.value
	const captainReady = orderType.value === 'ship'
		? captainName.value.trim().length > 0 && captainPhone.value.trim().length > 0
		: true
	return baseReady && captainReady && !!selectedPayment.value && !isSubmitting.value
})

	// 当前选中船舶索引（直接受控，避免因字段不一致导致回退到第一个）
	const shipIndex = ref(0)




// 页面加载
onMounted(() => {
	initOrderData()
	loadDefaultData()
})

// 初始化订单数据
const initOrderData = () => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options || {}

	// 优先：解析新格式 data（购物车传参）
	if (options.data) {
		try {
			const payload = JSON.parse(decodeURIComponent(options.data))
			if (payload && Array.isArray(payload.items)) {
				orderItems.value = payload.items
			}
			if (payload && payload.cartType) {
				orderType.value = payload.cartType === 'ship' ? 'ship' : 'personal'
			}
			if (payload && payload.shipId) {
				selectedShipId.value = String(payload.shipId)
			}
		} catch (error) {
			console.error('解析订单数据失败(data):', error)
		}
	} else if (options.items) {
		// 兼容：老格式 items、type
		try {
			orderItems.value = JSON.parse(decodeURIComponent(options.items))
		} catch (error) {
			console.error('解析订单商品失败(items):', error)
		}
		if (options.type) {
			orderType.value = options.type
		}
			if (options.shipId) {
				selectedShipId.value = String(options.shipId)
			}

	} else {

		// 兜底：从本地存储读取
		try {
			const itemsStr = uni.getStorageSync('checkoutItems')
			if (itemsStr) {
				orderItems.value = JSON.parse(itemsStr)
			}
			const t = uni.getStorageSync('checkoutType')
			if (t) {
				orderType.value = t === 'ship' ? 'ship' : 'personal'
			}
		} catch (error) {
			console.error('读取本地结算数据失败:', error)
		}
	}

	calculatePrice()
}

// 加载默认数据
const loadDefaultData = async () => {
	try {
		// 仅在船舶订单时加载船舶信息；个人订单直接使用所选港口

		if (orderType.value === 'ship') {
			await loadShipInfo()
		}

		// 设置默认支付方式
		if (paymentMethods.value.length > 0) {
			selectedPayment.value = paymentMethods.value[0].id
		}

			// 默认填充用户联系电话到船长电话（若存在）
			await fillPhoneFromUser()


	} catch (error) {
		console.error('加载默认数据失败:', error)
	}
}


// 加载船舶信息（用于船舶订单：下拉选择 shipName）
const loadShipInfo = async () => {
	try {
		const res = await productApi.getShipList()
		let ships = []
		if (Array.isArray(res)) {
			if (res.length && res[0] && res[0].ships) {
				ships = res.flatMap(c => c.ships || [])
			} else {
				ships = res
			}
		} else if (res && Array.isArray(res?.data)) {
			ships = res.data
		} else if (res && Array.isArray(res?.rows)) {
			ships = res.rows
		}

		shipOptions.value = ships

		// 根据 URL 传入的 shipId 预选；否则默认第一个
		if (selectedShipId.value) {
			selectedShip.value = ships.find(s => String(s.id ?? s.shipId) === String(selectedShipId.value)) || null
		}
		if (!selectedShip.value && ships.length) {
			selectedShip.value = ships[0]
		}
		// 同步受控索引，确保显示与选择一致
		let idx = 0
		if (selectedShip.value) {
			const sid = String(selectedShip.value.id ?? selectedShip.value.shipId ?? selectedShip.value.imoCode ?? selectedShip.value.shipNo ?? selectedShip.value.shipName)
			const tryIdx = ships.findIndex(s => String(s.id ?? s.shipId ?? s.imoCode ?? s.shipNo ?? s.shipName) === sid)
			idx = tryIdx >= 0 ? tryIdx : 0
		}
		shipIndex.value = idx
	} catch (error) {
		console.error('加载船舶信息失败:', error)
	}
}


	// H5 端使用自定义底部弹层，提升选择体验
	const showShipPopup = ref(false)
	const shipDisplayList = computed(() => (shipOptions.value || []).map(s => ({
		title: s.shipName || s.name || '未命名船舶',
		sub: s.imoCode ? `IMO: ${s.imoCode}` : ''
	})))
	const openShipSelector = () => {
		if (!shipOptions.value?.length) {
			uni.showToast({ title: '暂无可选船舶', icon: 'none' })
			return
		}
		showShipPopup.value = true
	}
	const closeShipSelector = () => { showShipPopup.value = false }
	const handleSelectShip = (idx) => {
		if (shipOptions.value[idx]) {
			shipIndex.value = idx
			selectedShip.value = shipOptions.value[idx]
			selectedShipId.value = String(selectedShip.value.id ?? selectedShip.value.shipId ?? '')
			showShipPopup.value = false
		}
	}



// 船舶选择：下拉变更回调
const onShipChange = (e) => {
	const idx = Number(e?.detail?.value)
	if (!Number.isNaN(idx) && shipOptions.value[idx]) {
		shipIndex.value = idx
		selectedShip.value = shipOptions.value[idx]
		selectedShipId.value = String(selectedShip.value.id ?? selectedShip.value.shipId ?? '')
	}
}

// 通用商品字段读取（兼容购物车与详情两种来源）
const getUnitPrice = (item) => {
	if (typeof (item && item.price) === 'number') return item.price
	const p = item && item.product && item.product.price
	return typeof p === 'number' ? p : 0
}
const getProductImage = (item) => {
	return (item && item.product && item.product.mainImage) || (item && item.productImage) || '/static/images/default-product.png'
}
const getProductName = (item) => {
	return (item && item.product && item.product.name) || (item && item.productName) || ''
}
const getProductSpec = (item) => {
	return (item && item.selectedSpec) || (item && item.specText) || ''
}

// 计算价格
const calculatePrice = () => {
	const getUnitPrice = (item) => {
		if (typeof item?.price === 'number') return item.price
		const p = item?.product?.price
		return typeof p === 'number' ? p : 0
	}
	const productTotal = orderItems.value.reduce((total, item) => {
		return total + getUnitPrice(item) * (item.quantity || 0)
	}, 0)

	priceInfo.value.productTotal = productTotal

	// 免运费：所有订单运费为0
	priceInfo.value.shippingFee = 0

	// 取消关税：不再计算关税
	priceInfo.value.customsFee = 0

	// 计算总金额 = 商品 + 运费 (+ 关税) - 优惠
	priceInfo.value.totalAmount = productTotal +
		priceInfo.value.shippingFee +
		priceInfo.value.customsFee -
		priceInfo.value.discount
}

// 切换订单类型
const switchOrderType = async (type) => {
	orderType.value = type
	calculatePrice()

	if (type === 'ship') {
		await loadShipInfo()
	}
}




// 选择支付方式
const selectPayment = (paymentId) => {
	selectedPayment.value = paymentId
}

// 返回到购物车（写死）
const backToCart = () => {
	uni.switchTab({ url: '/pages/cart/index' })
}

// 提交订单
const submitOrder = async () => {
	if (!canSubmit.value) return

	try {
		isSubmitting.value = true

		const uid = getCurrentUserId()
		if (!uid) {
			uni.showToast({ title: '请先登录后再提交订单', icon: 'none' })
			return
		}

			// 校验船舶订单的必填项：船长姓名与电话
			if (orderType.value === 'ship') {
				const name = captainName.value.trim()
				const phone = captainPhone.value.trim()
				if (!name) {
					uni.showToast({ title: '请填写船长姓名', icon: 'none' })
					isSubmitting.value = false
					return
				}
				if (!phone) {
					uni.showToast({ title: '请填写船长电话', icon: 'none' })
					isSubmitting.value = false
					return
				}
			}

		const orderData = {
			userId: uid,
			type: orderType.value,
			items: orderItems.value,
			address: null,
			shipInfo: orderType.value === 'ship' ? selectedShip.value : null,
			portId: selectedPort.value?.id,
			paymentMethod: selectedPayment.value,
			remark: orderRemark.value,
			priceInfo: priceInfo.value,
			// Captain info from frontend inputs (optional)
			captainName: orderType.value === 'ship' ? captainName.value.trim() : '',
			captainPhone: orderType.value === 'ship' ? captainPhone.value.trim() : '',
			// Personal order contact phone (optional)
			contactPhone: orderType.value === 'personal' ? contactPhone.value.trim() : ''
		}

		const response = await orderApi.createOrder(orderData)
		console.log('订单创建成功:', response)

		// 订单创建成功后直接调用支付宝支付
		if (response && response.orderNo) {
			try {
				// 调用支付宝支付接口
				const paymentResponse = await request.post('/user/alipay/create', {
					orderNo: response.orderNo,
					amount: priceInfo.value.totalAmount.toString(),
					subject: '海关商品支付'
				})

				if (paymentResponse) {
				// 支付宝返回的是HTML表单，可以选择在当前页面显示或新窗口打开
				const paymentForm = paymentResponse
				
				// 方式1：在当前页面直接显示支付表单（推荐）
				// 创建一个临时的div容器来显示支付表单
				const paymentContainer = document.createElement('div')
				paymentContainer.innerHTML = paymentForm
				paymentContainer.style.position = 'fixed'
				paymentContainer.style.top = '0'
				paymentContainer.style.left = '0'
				paymentContainer.style.width = '100%'
				paymentContainer.style.height = '100%'
				paymentContainer.style.zIndex = '9999'
				paymentContainer.style.backgroundColor = 'white'
				document.body.appendChild(paymentContainer)
				
				// 自动提交支付表单
				const form = paymentContainer.querySelector('form')
				if (form) {
					form.submit()
				}
				
				// 方式2：如果需要在新窗口打开，可以取消注释下面的代码
				// const newWindow = window.open('', '_blank')
				// newWindow.document.write(paymentForm)
				// newWindow.document.close()
			} else {
					console.error('支付创建失败:', paymentResponse)
					uni.showToast({
						title: '支付创建失败',
						icon: 'error'
					})
				}
			} catch (paymentError) {
				console.error('调用支付接口失败:', paymentError)
				uni.showToast({
					title: '支付调用失败',
					icon: 'error'
				})
			}
		} else {
			uni.showToast({
				title: '订单创建成功，但缺少订单号',
				icon: 'error'
			})
		}


	} catch (error) {
		console.error('提交订单失败:', error)
		uni.showToast({
			title: error.message || '提交失败，请重试',
			icon: 'none'
		})
	} finally {
		isSubmitting.value = false
	}
}
</script>

<style lang="scss" scoped>
.order-confirm-container {
	background: #F5F5F5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.order-type-section {
	background: #FFFFFF;
	padding: 15px;
	margin-bottom: 10px;
}

.type-tabs {
	display: flex;
	background: #F8F9FA;
	border-radius: 25px;
	padding: 4px;
}

.type-tab {
	flex: 1;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	transition: all 0.3s ease;

	&.tab-active {
		background: var(--primary-color);

		.tab-text {
			color: #FFFFFF;
			font-weight: 600;
		}
	}

	.tab-text {
		font-size: 16px;
		color: #666666;
	}
}

.main-content {
	flex: 1;
	padding-bottom: 100px;
}

.address-section,
.products-section,
.fee-section,
.payment-section,
.remark-section {
	background: #FFFFFF;
	margin-bottom: 10px;
	padding: 15px;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.edit-btn,
	.product-count {
		font-size: 14px;
		color: var(--primary-color);
	}
}

.address-card {
	background: #F8F9FA;
	border-radius: 8px;
	padding: 15px;
}

.address-info {
	.address-name {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 8px;

		.name {
			font-size: 16px;
			font-weight: 600;
			color: #333333;
		}

		.phone {
			font-size: 14px;
			color: #666666;
		}
	}

	.address-detail {
		font-size: 14px;
		color: #666666;
		line-height: 1.4;
	}
}

.no-address {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.no-address-text {
		font-size: 16px;
		color: #999999;
	}

	.arrow {
		font-size: 16px;
		color: #999999;
	}
}

.ship-info {
	.ship-detail {
		margin-bottom: 10px;

		.ship-name {
			font-size: 16px;
			font-weight: 600;
			color: #333333;
			margin-right: 15px;
		}

		.captain {
			font-size: 14px;
			color: #666666;
		}
	}

	.port-info {
		.port-name {
			font-size: 14px;
			color: #333333;
			margin-right: 15px;
		}

		.port-code {
			font-size: 12px;
			color: #999999;
		}
	}
}

.product-list {

}

.product-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #F0F0F0;

	&:last-child {
		border-bottom: none;
	}
}

.product-image {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	flex-shrink: 0;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.product-name {
		font-size: 16px;
		color: #333333;
		margin-bottom: 4px;
	}

	.product-spec {
		font-size: 14px;
		color: #999999;
		margin-bottom: 8px;
	}

	.product-price-qty {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.price {
			font-size: 16px;
			font-weight: 600;
			color: var(--primary-color);
		}

		.quantity {
			font-size: 14px;
			color: #666666;
		}
	}
}

.fee-list {

}

.fee-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;

	&.discount {
		.fee-value {
			color: #ff4757;
		}
	}

	.fee-label {
		font-size: 14px;
		color: #666666;
	}

	.fee-value {
		font-size: 14px;
		color: #333333;
	}
}

.total-fee {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0 0;
	border-top: 1px solid #F0F0F0;
	margin-top: 10px;

	.total-label {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.total-value {
		font-size: 18px;
		font-weight: bold;
		color: var(--primary-color);
	}
}

.payment-list {

}

.payment-item {
	display: flex;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid #F0F0F0;

	&:last-child {
		border-bottom: none;
	}

	&.payment-selected {
		.payment-name {
			color: var(--primary-color);
		}
	}
}

.payment-icon {
	width: 24px;
	height: 24px;
	margin-right: 10px;
	border-radius: 6px;
}

.payment-name {
	flex: 1;
	font-size: 16px;
	color: #333333;
}

.payment-radio {
	.radio-checked {
		font-size: 16px;
		color: var(--primary-color);
	}

	.radio-unchecked {
		font-size: 16px;
		color: #CCCCCC;
	}
}

.remark-box {
	background: #F8F9FA;
	border: 1px solid #E5E5E5;
	border-radius: 8px;
	padding: 8px;
}

/* 船长信息输入样式 */
.captain-section { background: #FFFFFF; margin-bottom: 10px; padding: 15px; }
.form-item { margin-bottom: 10px; }
.form-input { width: 100%; height: 40px; background: #F8F9FA; border: 1px solid #E5E5E5; border-radius: 8px; padding: 0 12px; font-size: 14px; color: #333; }

.remark-input {
	width: 100%;
	min-height: 56px;
	background: transparent;
	border: none;
	font-size: 13px;
	color: #333333;
	line-height: 1.45;
}

.remark-footer {
	margin-top: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.remark-hint {
	font-size: 12px;
	color: #999999;
}

.remark-count {
	font-size: 12px;
	color: #999999;
}

.submit-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFFFFF;
	border-top: 1px solid #F0F0F0;
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 15px;
}

.price-summary {
	flex: 1;

	.total-text {
		font-size: 14px;
		color: #666666;
	}

	.total-price {
		font-size: 20px;
		font-weight: bold;
		color: var(--primary-color);
	}
}

.submit-btn {
	width: 120px;
	height: 45px;
	background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
	border: none;
	border-radius: 22px;

	&.btn-disabled {
		background: #CCCCCC;
	}

	.submit-text {
		font-size: 16px;
		font-weight: 600;
		color: #FFFFFF;
	}
}

/* H5 自定义底部选择弹层（root 级样式） */
.sheet-mask {
	position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
	background: rgba(0,0,0,0.45);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}
.sheet-panel {
	width: 100%;
	background: #fff;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	overflow: hidden;
}
.sheet-header {
	padding: 14px 16px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	border-bottom: 1px solid #f2f2f2;
}
.sheet-list { max-height: 50vh; }
.sheet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #f6f6f6;
}
.sheet-item.active { background: #f7fbff; }
.sheet-item-main { display: flex; flex-direction: column; }
.sheet-title { font-size: 15px; color: #333; }
.sheet-sub { margin-top: 4px; font-size: 12px; color: #999; }
.sheet-check { color: var(--primary-color); font-size: 18px; margin-left: 8px; }
.sheet-cancel { padding: 14px 16px; text-align: center; font-size: 16px; color: #333; background: #fff; }

</style>